<template>
    <div class="table-container">
        <div class="button-list" v-if="$slots.left || $slots.right">
            <div class="dis-flex flex-justify-space-between">
                <div><slot name="left" /></div>
                <div><slot name="right" /></div>
            </div>
        </div>
        <div class="table-body">
            <vxe-table @cell-click="tableCellClick" :edit-config="editConfig" :tree-config="treeConfig"  :show-overflow="showOverflow" :height="height" :scroll-y="{enabled: true, gt: 0}" ref="vxeTableRef" :data="tableData" @keydown="">
                <template v-for="item in column" :key="item.field">
                    <!-- 序号 -->
                    <vxe-column v-if="item.type === 'seq'" type="seq" width="70" :fixed="item.fixed"></vxe-column>
                    <!-- 复选框 -->
                    <vxe-column v-else-if="item.type === 'checkbox'" type="checkbox" width="60" :fixed="item.fixed"></vxe-column>
                    <!-- 插槽 -->
                    <vxe-column v-else-if="item.type === 'slot'" :width="item.width" :field="item.field" :title="item.title" :fixed="item.fixed" :formatter="innerFormat" :class-name="item.className">
                        <template #default="{ row }">
                            <slot :name="item.slotName" :row="row" />
                        </template>
                    </vxe-column>
                    <!-- 操作项 -->
                    <vxe-column v-else-if="item.type === 'operation'" title="操作" :width="item.width" :fixed="item.fixed" :class-name="item.className">
                        <template #default="{ row }">
                            <slot name="operation" :row="row" />
                        </template>
                    </vxe-column>
                    <!-- 常规列 -->
                    <vxe-column v-else :tree-node="item.treenode" :edit-render="item.editRender || false" :field="item.field" :title="item.title" :width="item.width" :fixed="item.fixed"  :formatter="item.format || innerFormat" :class-name="item.className">
                        <template v-if="item.edit" #edit="{ row }">
                            <vxe-input v-model="row[item.field]" clearable></vxe-input>
                        </template>
                    </vxe-column>
                </template>
                <!-- 操作列 -->
                <!-- <vxe-column v-if="operation" title="操作">
                    <template #default="{ row }">
                        <slot name="operation" :row="row" />
                    </template>
                </vxe-column> -->
            </vxe-table>
        </div>
        <div class="table-pagination" v-if="isPage">
            <a-pagination v-model:current="currentPage" v-model:page-size="currentPageSize" show-quick-jumper :total="total" @change="changePage" />
        </div>
    </div>
</template>
<script setup>
import { nextTick, onMounted, ref, watch } from "vue"
import { PAGE, PAGE_SIZE, IS_NULL } from "@/constant/index"
// props
import { columnsProps } from "./props"
import { withWarn } from "ant-design-vue/es/modal/confirm";
const props = defineProps(columnsProps)
const emit = defineEmits(["cell-click", "page"])
const vxeTableRef = ref(null)
const height = ref(0)
/**
 * 页码
 */
const currentPage = ref(PAGE)
const currentPageSize = ref(PAGE_SIZE)
const total = ref(0)
/**
 * 数据测试
 */
const tableData = ref([])
/**
 * 监听
 */
watch(() =>props.data, (val) => {
    console.log(555)
    tableData.value = val
}, {
    immediate: true
})

/**
 * 设置总数
 */
const setTotal = (value) => {
    total.value = value
}
/**
 * 设置页码
 */
const setCurrentPage = (page) => {
    currentPage.value = page
}
const setCurrentPageSize = (size) => {
    currentPageSize.value = size
}
/**
 * 单元格点击事件
 */
const tableCellClick = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event }) => {
    emit('cell-click', { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event })
}
/**
 * 当前组件渲染完成
 */
onMounted(async () => {
 await nextTick()
 setTableHeight()
 window.onresize = () => setTableHeight()
})
/**
 * 设置表格高度
 */
const setTableHeight = () => {
    height.value = vxeTableRef.value.$el.parentNode.offsetHeight
}
/**
 * 内容格式化
 */
const innerFormat = ({ cellValue, row, column }) => {
    const isNull = [null, undefined, ""].includes(cellValue)
    return isNull ? IS_NULL : cellValue
}
/**
 * 页码
 */
const changePage = (page, pageSize) => {
    emit("page", page, pageSize)
}
/**
 * 暴露对象
 */
defineExpose({
    vxeTableRef,
    setTotal,
    setCurrentPage,
    setCurrentPageSize
})
</script>
<style lang="scss" scoped>
.table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .table-body {
        flex: 1;
        height: 0;
    }
}
.button-list {
    padding-bottom: 20px;
}
.table-pagination {
    text-align: right;
    padding-top: 20px;
}
</style>